<template>
    <base-page>
        <base-header title="单词记写"></base-header>
        <base-page-content class="column px50">
            <div class="col center">
                <div class="px12 full-width">
                    <div class="f32 row center">
                        {{pinyin}}
                    </div>
                    <div class="f22 clearfix mb6">
                        <md-icon class="fr" name="volumn" size="lg" @click="onPlay"></md-icon>
                    </div>
                    <div class="word square f120 white-bg  ba center">
                        {{word}}
                    </div>
                </div>
            </div>

            <div class="center">{{index + 1}}/{{Text.length}}</div>
            <div class="bottom mb50 mt20 row between">
                <md-button  size="small" inline plain @click.native="prev">上一个</md-button>
                <md-button  size="small" inline plain @click.native="next">下一个</md-button>
            </div>
        </base-page-content>
    </base-page>
</template>
<script>
    import {create_audio} from '../utils/audio';
    import {executeSql} from '../utils/web_sqlite';
    import { getWordList } from '@/utils/word';
    export default {
        data() {
            this.Text = getWordList();
            return {
                index: 0,
                input: 0,
                pinyin: ''
            };
        },
        computed: {
            word() {
                return this.Text[this.index];
            }
        },
        created() {
        },
        methods: {
            prev() {
                if (this.index <= 0) return;
                 this.index--;
            },
            next() {
                if (this.index >= Text.length) return;
                this.index++;
            },
            onPlay() {
                create_audio(Text[this.index]).play();
            },
            async updatePinyin() {
                const [item] = await executeSql(`SELECT * FROM word WHERE word = "${this.word}" LIMIT 1`);
                const pinyin = item ? item.spell.split(',')[0] : '';
                this.pinyin = pinyin;
                console.log(pinyin);
            }
        },
        beforeRouteLeave(to, from, next) {
            console.log('leave');
            next();
        },
        components: {},
        watch: {
            index() {
                this.onPlay();
            },
            word: {
                immediate: true,
                handler() {
                    this.updatePinyin();
                }
            }
        }
    };
</script>
<style lang="scss" scoped>
    .bottom {
        button {
            width: 126px;
        }
    }
</style>

